<template>
 <div>

    <el-form :inline="true"  class="demo-form-inline" :model="categoryId">

      <el-form-item label="一级分类">
        <el-select  placeholder="请选择"  v-model="categoryId.id1" @change="getCategory2List" :disabled="isshow">
          <el-option v-for="option1 in list1" :key="option1.id" :label="option1.name" :value="option1.id"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="二级分类" :model="categoryId" >
        <el-select  placeholder="请选择" v-model="categoryId.id2" @change="getCategory3List" :disabled="isshow">
          <el-option :label="option2.name"  v-for="option2 in list2" :key="option2.id" :value="option2.id"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="三级分类">
        <el-select  placeholder="请选择" v-model="categoryId.id3" @change="submitCategoryId" :disabled="isshow">
          <el-option :label="option3.name" :value="option3.id" v-for="option3 in list3" :key="option3.id"></el-option>
        </el-select>
      </el-form-item>

    </el-form>

 </div>
</template>

<script>
export default {
    name: 'categorySelect',
    data(){
        return {
          list1:[],
          list2:[],
          list3:[],
          categoryId:{
            id1:'',
            id2:'',
            id3:''
          }
        }
    },
    props:['isshow'],
    mounted(){
        this.getCategory1List()
    },
    methods:{
        async getCategory1List(){

            let result=await this.$tradeAPI.attr.reqCategory1List();
            if(result.code==200){
                this.list1=result.data;

            }
        },

        async getCategory2List(){
          this.list2=[];
          this.categoryId.id2='';
          this.list3=[];
          this.categoryId.id3='';
          let result=await this.$tradeAPI.attr.reqCategory2List(this.categoryId.id1);
          if(result.code==200){
            this.list2=result.data;
            
          }
        },

        async getCategory3List(){
          this.list3=[];
          this.categoryId.id3='';
          let result=await this.$tradeAPI.attr.reqCategory3List(this.categoryId.id2);
          if(result.code==200){
            this.list3=result.data
          }
        },

        submitCategoryId(){
          this.$emit('getCategoryId',this.categoryId)
        }


    }


}
</script>

<style>

</style>
